<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
    <title>Document</title>
</head>
<style>
    body {
        margin: 0px;
    }

    .el-header {
        /* 上面 */
        border-bottom: 1px solid #ffc5f0;
        background-color: #ffc5f0;
        background: linear-gradient(to right, #9ec8f5, #fe8de0);
    }

    .el-aside {
        /* 左边 */
        border-right: 1px solid lightseagreen;
        position: absolute;
        top: 60px;
        bottom: 0px;

    }

    .el-main {
        /* 右边 */
        /* border: 1px solid lightgreen; */
        position: absolute;
        left: 200px;
        right: 0px;
        top: 60px;
        bottom: 0px;
    }
</style>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <!-- <el-button size="small" type="danger" plain>退出登录</el-button> -->
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span><i :class="data.imgicon"></i>
                            {{node.label}}</span>
                        </span>
                    </el-tree>
                </el-aside>
                <el-main>
                    <iframe :src="iframesrc" frameborder="0" style="width: 100%; height: 99%;"></iframe>
                </el-main>
            </el-container>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            treedata: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            iframesrc: "",
        },
        methods: {
            handleNodeClick(data) {
                // this.src = data.href
                this.iframesrc = data.href
                // console.log(data.href);
            },
            initTreeData() {

                let that = this
                axios.get(API + "boot/selectMenu").then(function (res) {
                    let arrs = arrayToTree(res.data.data.menuList)
                    console.log(arrs)

                    that.treedata = arrs
                    
                }).catch(err => {
                    console.log(err)
                });
            
            }
        }, mounted() {//vue生命周期函数，挂载完之后执行
            this.initTreeData()//初始化获取数据
        }
    })
</script>

</html>